<template>
  <div class="add">
    <BaseDialog
      :title="isType === 'add' ? '新增' : '编辑'"
      width="1100px"
      v-model:visible="innerVisible"
      :renderDefaultFooter="false"
    >
      <MyForm
        v-model:formData="formData"
        v-model:columns="formColumns"
        :rules="rules"
        :saveBtnLoading="saveBtnLoading"
        :isCalculateLayout="true"
        background="#fff"
        @submit="onSubmit"
        @cancel="innerVisible = false"
      >
        <template #form-icon>
          <icon-select v-model="formData.icon" />
        </template>
      </MyForm>
    </BaseDialog>
  </div>
</template>
<script setup>
import { ref, computed, onMounted, watch } from "vue";
import * as api from "@/api/index.js";
import { handleTree, columnFilters, getSubZhEn } from "@/utils/mUtils.js";
import i18n from "@/lang/index.js";
import { ElMessage } from "element-plus";
const props = defineProps({
  visible: {
    type: Boolean,
  },
  currRow: {
    type: Object,
    default: () => null,
  },
  isType: {
    type: String,
    default: "add",
  },
});
const emits = defineEmits(["update:visible", "onSubmit"]);
const menuTypeOptions = [
  { label: i18n.global.t("目录"), value: "M" },
  { label: i18n.global.t("菜单"), value: "C" },
  { label: i18n.global.t("按钮"), value: "F" },
];
const innerVisible = computed({
  get() {
    return props.visible;
  },
  set(val) {
    emits("update:visible", val);
  },
});
const formData = ref({
  parentName: "",
  menuType: "M",
  siteRankCode: "",
  component: "Layout",
  status: "0",
  visible: "0",
});
const formColumns = ref([
  {
    title: "",
    structure: [
      {
        content: [
          {
            x: 0,
            y: 0,
            w: 8,
            h: 1,
            i: "1",
            type: "label_tree",
            label: i18n.global.t("上级菜单"),
            prop: "parentName",
            code: "parentId",
            placeholder: i18n.global.t("请选择上级菜单"),
            treeDate: [],
            props: {
              label: "menuName",
              value: "menuId",
              children: "children",
            },
            span: 8,
          },
          {
            x: 8,
            y: 0,
            w: 16,
            h: 1,
            i: "2",
            type: "label_radio_group",
            label: i18n.global.t("菜单类型"),
            prop: "menuType",
            options: menuTypeOptions,
            span: 16,
          },
          {
            x: 0,
            y: 1,
            w: 8,
            h: 1,
            i: "3",
            type: "label_number",
            label: i18n.global.t("显示排序"),
            prop: "orderNum",
            span: 8,
          },
          {
            x: 8,
            y: 1,
            w: 8,
            h: 1,
            i: "4",
            type: "label_input",
            label: i18n.global.t("目录名称"),
            prop: "menuName",
            placeholder: i18n.global.t("请输入名称"),
            span: 8,
            maxlength: 50,
          },
          {
            x: 16,
            y: 1,
            w: 8,
            h: 1,
            i: "5",
            label: "图标",
            type: "slot",
            prop: "icon",
            hide: false,
            span: 8,
          },
          {
            x: 0,
            y: 2,
            w: 8,
            h: 1,
            i: "6",
            label: i18n.global.t("组件名称"),
            prop: "componentName",
            type: "label_input",
            hide: false,
            placeholder: i18n.global.t("组件名称"),
            span: 8,
          },
          {
            x: 8,
            y: 3,
            w: 8,
            h: 1,
            i: "7",
            label: i18n.global.t("路由名称"),
            prop: "path",
            type: "label_input",
            hide: false,
            placeholder: i18n.global.t("路由名称"),
            span: 8,
            maxlength: 200,
          },
          {
            x:16,
            y: 2,
            w: 8,
            h: 1,
            i: "8",
            label: i18n.global.t("权限标识"),
            prop: "perms",
            type: "label_input",
            maxlength: 100,
            placeholder: i18n.global.t("权限标识"),
            span: 8,
          },
          {
            x: 0,
            y: 3,
            w: 8,
            h: 1,
            i: "9",
            label: i18n.global.t("目录类型"),
            prop: "component",
            type: "label_select",
            options: [
              { label: i18n.global.t("根目录"), value: "Layout" },
              { label: i18n.global.t("子目录"), value: "CommonLayout" },
            ],
            props: { label: "label", value: "value" },
            placeholder: i18n.global.t("目录类型"),
            hide: false,
            span: 8,
          },
          {
            x: 8,
            y: 3,
            w: 8,
            h: 1,
            i: "10",
            type: "label_radio_group",
            label: i18n.global.t("菜单状态"),
            prop: "status",
            options: [
              { value: "0", label: i18n.global.t("启用") },
              { value: "1", label: i18n.global.t("停用") },
            ],
            span: 8,
          },
          {
            x: 16,
            y: 3,
            w: 8,
            h: 1,
            i: "11",
            label: i18n.global.t("显示状态"),
            type: "label_radio_group",
            prop: "visible",
            hide: false,
            options: [
              { value: "0", label: i18n.global.t("显示") },
              { value: "1", label: i18n.global.t("隐藏") },
            ],
            span: 8,
          },
        ],
      },
    ],
  },
]);
const rules = ref({
  parentId: [
    {
      required: true,
      message: i18n.global.t("请选择上级菜单"),
      trigger: "change",
    },
  ],
  menuType: [
    { required: true, message: i18n.global.t("请选择类型"), trigger: "change" },
  ],
  menuName: [
    { required: true, message: i18n.global.t("请输入名称"), trigger: "change" },
  ],
  path: [
    {
      required: true,
      message: i18n.global.t("请输入路由名称"),
      trigger: "change",
    },
  ],
  orderNum: [
    {
      required: true,
      message: i18n.global.t("请选择显示排序"),
      trigger: "change",
    },
  ],
  status: [
    {
      required: true,
      message: i18n.global.t("请选择菜单状态"),
      trigger: "change",
    },
  ],
  visible: [
    {
      required: true,
      message: i18n.global.t("请选择显示状态"),
      trigger: "change",
    },
  ],
  component: [
    {
      required: true,
      message: i18n.global.t("请选择目录类型"),
      trigger: "change",
    },
  ],
});
const saveBtnLoading = ref(false);
onMounted(() => {
  if (props.isType == "add") {
    if (props.currRow) {
      formData.value.parentName = props.currRow.menuName;
      formData.value.parentId = props.currRow.menuId;
    }
  } else {
    getInfo();
  }
  onMenuList();
});

watch(
  () => formData.value.menuType,
  (val) => {
    if (val === "M") {
      columnFilters(formColumns.value, "menuName").label =
        i18n.global.t("目录名称");
      columnFilters(formColumns.value, "componentName").hide = true;
      columnFilters(formColumns.value, "path").hide = false;
      columnFilters(formColumns.value, "component").hide = false;
      columnFilters(formColumns.value, "component").label =
        i18n.global.t("目录类型");
      columnFilters(formColumns.value, "component").type = "label_select";
      columnFilters(formColumns.value, "status").hide = false;
      columnFilters(formColumns.value, "visible").hide = false;
      columnFilters(formColumns.value, "icon").hide = false;
    }

    if (val === "C") {
      columnFilters(formColumns.value, "menuName").label =
        i18n.global.t("菜单名称");
      columnFilters(formColumns.value, "componentName").hide = false;
      columnFilters(formColumns.value, "path").hide = false;
      columnFilters(formColumns.value, "component").hide = false;
      columnFilters(formColumns.value, "component").label =
        i18n.global.t("组件路径");
      columnFilters(formColumns.value, "component").type = "label_input";
      columnFilters(formColumns.value, "component").maxlength = "255";
      columnFilters(formColumns.value, "status").hide = false;
      columnFilters(formColumns.value, "visible").hide = false;
      columnFilters(formColumns.value, "icon").hide = false;
    }
    if (val === "F") {
      columnFilters(formColumns.value, "menuName").label =
        i18n.global.t("功能名称");
      columnFilters(formColumns.value, "componentName").hide = true;
      columnFilters(formColumns.value, "icon").hide = true;
      columnFilters(formColumns.value, "path").hide = true;
      columnFilters(formColumns.value, "component").hide = true;
      columnFilters(formColumns.value, "status").hide = true;
      columnFilters(formColumns.value, "visible").hide = true;
    }
  },
  { immediate: true }
);


const onMenuList = () => {
  api.default.system.menu
    .list({
      tyle: 1,
    })
    .then((res) => {
      const menu = [
        {
          menuId: "0",
          menuName: i18n.global.t("主类目"),
          children: [],
        },
      ];
      menu[0].children = handleTree(res.data, "menuId", "", "", "0");
      columnFilters(formColumns.value, "parentName").treeDate = menu;
    });
};

const onSubmit = async () => {
  if (props.isType === "add") {
    // 新增
    saveBtnLoading.value = true;
    await api.default.system.menu
      .add({
        ...formData.value,
        type: 1,
      })
      .then(() => {
        ElMessage.success(i18n.global.t("新增成功"));
        innerVisible.value = false;
        saveBtnLoading.value = false;
        emits("onSubmit");
      })
      .catch(() => {
        saveBtnLoading.value = false;
      });
  } else {
    // 编辑
    saveBtnLoading.value = true;
    await api.default.system.menu
      .edit(formData.value)
      .then(() => {
        ElMessage.success(i18n.global.t("修改成功"));
        innerVisible.value = false;
        saveBtnLoading.value = false;
        emits("onSubmit");
      })
      .catch(() => {
        saveBtnLoading.value = false;
      });
  }
};
const getInfo =  () => {
  saveBtnLoading.value = true;
   api.default.system.menu.getInfo(props.currRow.menuId).then((res) => {
    formData.value = res.data;
    saveBtnLoading.value = false;
  }).finally(() => {
    saveBtnLoading.value = false;
  })
};
</script>
<style lang="scss" scoped>
.search-btn {
  width: 120px;
  margin: 20px auto 0;
}
</style>
